<template>
  <div class="login_container">
      <div class="login_box">
        <!-- 头像区域 -->
        <div class="avatar_box">
          <img src="static\image\1.jpg" alt="">
        </div>
        <!-- 表单区域 -->
        <div>
          <LoginForm></LoginForm>
        </div>
      </div>
  </div>
</template>

<script>
import LoginForm from '../components/form/LoginForm.vue'
export default {
    name:"Login",
    components:{LoginForm},
}
</script>

<style lang="less" scoped>
.login_container{
  background-color:rgb(155, 192, 228) ;
  height: 100%;
}
.login_box{
  width: 450px;
  height: 300px;
  background-color: rgb(232, 236, 240);
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  .avatar_box{
    height:130px;
    width: 130px;
    border:1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img{
      width:100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(189, 187, 187, 0.993);
    }
  }
  
}

</style>